<template>
  <div>
    <ConfigForm v-model="formData" :config="config" ref="configFormRef" />
    <el-button @click="config.mode = config.mode === 'add' ? 'look' : 'add'">切换表单模式</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import ConfigForm from '@/components/ConfigForm/index'

const formData = ref({
  name: 'Hello'
})

const config = ref({
  mode: 'add',
  columns: [
    { prop: 'name', label: '姓名', type: 'input' },
    {
      prop: 'sex', label: '性别', type: 'select',
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' },
      ],
      rules: [{ required: true }]
    },
    {
      prop: 'date', label: '出生日期', type: 'datePicker', props: { type: 'date', valueFormat: 'YYYY-MM-DD' },
      rules: [{ required: true }]
    },
    { prop: 'remark', label: '备注', type: 'input', colProps: { span: 24 }, props: { type: 'textarea' } },
  ]
})

</script>
